<template>
	<view>

		<view class="active" v-for="(item,index) in list" :key='index'>
			<view class="user">
				<image :src="item.avatar" mode=""></image>
				<view class="right">
					<text class="username">{{item.nickname}}</text>
					<text>{{ timestampFormat(item.time) }}</text>
				</view>
			</view>
			<view class="dianzan">
				<image v-if="item.type==0" src="../static/zan.png" mode=""></image>
				<text v-if="item.type==1">回复：{{item.review_content}}</text>

			</view>
			<view class="centent" @tap="toschooldog(item.classring_id)">
				<view class="leftnav">
					<image v-if="item.classring.if_video==0" :src="'https://'+item.classring.image[0]" mode=""></image>
					<video  v-if="item.classring.if_video==1" :src="'https://'+item.classring.image[0]" :controls="controls" ></video>
				</view>
				<view class="rightnav">
					<text class="namepro">{{item.classring.nickname}}</text>
					<text class="neirongnav">{{item.classring.content}}</text>
				</view>

			</view>
		</view>

		<view class="bottom">
			<text>我是有底线的~</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				index: 0,
				list: [],
				controls:false

			}
		},
		methods: {
			timestampFormat(timestamp) {
				if (!timestamp) return '';
			
				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}
			
				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
			
				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
			
				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();
			
				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			},
			newslistshow() {
				this.$store
					.dispatch('newslistshow', {
						openid: this.userInfo.openid,
						index: this.index,
						class_id: uni.getStorageSync("class_id")
					})
					.then(res => {
						console.log(res)
						this.list = res.data.data
					});
			},



			toschooldog(pageid) {
				uni.setStorageSync("pageid", pageid)
				uni.switchTab({
					url: "../../pages/schooldog/schooldog"
				})
			}

		},
		onShow() {

		},
		onLoad() {
			if (uni.getStorageSync("def")) {
				this.index = uni.getStorageSync("def")
			}

			this.newslistshow()
		}

	}
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;
		box-sizing: border-box;
	}

	.active {
		width: 100%;
		height: 420rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;

		.user {
			width: 100%;
			height: 120rpx;
			// background-color: #007AFF;
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				color: #999999;
				font-size: 24rpx;

				.username {
					color: #000;
					font-size: 30rpx;
					font-weight: bold;
				}

			}
		}

		.dianzan {
			width: 100%;
			height: 50rpx;
			// background-color: #2C405A;
			box-sizing: border-box;
			padding-left: 85rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.centent {
			width: 100%;
			height: 210rpx;
			border-radius: 15rpx;
			background-color: #f4f4f4;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;

			.leftnav {
				width: 170rpx;
				height: 170rpx;
				margin-right: 15rpx;

				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 5rpx;

				}
				video{
					width: 170rpx;
					height: 170rpx;
				}
			}

			.rightnav {
				display: flex;
				flex-direction: column;
				// justify-content: space-evenly;
				// width: calc(100% - 170rpx);
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				

				.namepro {
					color: #007AFF;
					font-size: 30rpx;
					font-weight: bold;
					height: 25%;
				}

				.neirongnav {
					// height: 80%;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
			}
		}
	}

	.bottom {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #999999;
		font-size: 26rpx;
		text-align: center;
	}
</style>
